<template>
  <div>
    <div class="wfd">
      <div class="h60">
        <span class="exnum">{{ Num }}.{{ item.title }}</span>
        <span class="labels">
          <span v-if="item.isJt == '1'">机经</span>
          <span v-if="item.isJt !== '1'" style="background: #7cc3d6"
            >练习题</span
          >
          <span
            style="background: #ff5e4e"
            v-if="item.labelStyle == 'wrong-color'"
            >错题</span
          >
          <span style="background: #13bfbf" v-if="subject.isYc == '1'"
            >本周预测</span
          >
          <span style="background: #99bbe4"
            >练习{{ practiceList.length }}次</span
          >
          <span style="background: #94d0f7">{{ item.titleNumber }}</span>
        </span>
        <Label
          v-if="item.labelStyle != undefined"
          :df="item.labelStyle"
          :id="item.id"
        ></Label>
      </div>
      <!-- 录音播放区域 -->
      <div class="h121">
        <div class="player">
          <AudioPlayer
            v-if="item.url"
            :url="item.url"
            :readyTime="readyTime"
            v-on:func="checkPlay"
          ></AudioPlayer>
           <h1 v-else class="none_audio_tip">此题暂未上传录音</h1>
        </div>
      </div>
      <!-- 多项选择 -->
      <div class="radio">
        <div class="descb">{{ item.describe }}</div>
        <div class="title">
          {{ item.content }}
        </div>
        <el-form>
          <el-radio-group v-model="checkedRadio">
            <div v-for="(item, index) in radio" :key="index">
              <el-radio size="medium" :label="+index+1" @change="getRadioVal"
                ><span ref="options">{{ item }}</span></el-radio
              >
            </div>
          </el-radio-group>
        </el-form>
      </div>
      <div class="time">
        <span v-if="isDt">答题时间：{{ s_to_hs(answerTime) }}</span>
        <span v-else>准备时间：{{ s_to_hs(readyTime) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Label from '../../../../practice/exercise/label'
import listeningUtil from "@/utils/listeningUtil";
import AudioPlayer from "../../audioplayer";
import { sendPost } from "@/utils/http";
import api from "@/config/api";
export default {
  mixins: [listeningUtil],
  props: ['item', 'Num'],
  components: {
    Label,
    AudioPlayer
  },
  data () {
    return {
      imgUrl: '',
      checkList: [
      ],
      checkedList: [], // 选中列表
      isAnswerShow: false,
      iNum: '', // 题目索引号
      option: [],
      radio: [],
      checkedRadio: '',
      answerTime:0
    }
  },
  created () {
    setInterval(this.countDownReady, 1000)
    console.log(this.item.option.split('&@#'));
    this.radio = this.item.option.split('&@#')

    this.checkedRadio=this.item.answer-0  // 回显已提交的答案
    // console.log(this.item.option.split('&@#'));
  },
  methods: {
    getRadioVal(){
      this.$emit('sendAnswer',this.checkedRadio)
    },
    //提交作业
    addPractice () {
      if (this.flag) {
        this.$msg.error("你已经作答，无需重复操作！")
        return
      }
      if (this.checkedList.length == 0) {
        this.$msg.error("至少选择一个选项！")
        return
      }
      let a = '';
      var that = this;

      console.log(this.checkedList)
      for (var i = 0; i < this.checkedList.length; i++) {
        if (a == '') {
          a = this.checkedList[i];
        } else {
          a += "," + this.checkedList[i];
        }
      }
      that.flag = true
      sendPost(api.submitAnswer, {
        id: that.$route.query.id,
        answer: a,
        times: that.answerTime
      }).then((r) => {
        that.$msg({
          message: '答案提交成功',
          type: 'success'
        });

        this.refresh(that.$route.query.id);
      })
    },
  },
}
</script>

<style lang="less" scoped>
.none_audio_tip{
  font-size: 1.25rem;
  color: #999;
  padding: 1.125rem;
}
.player{
  margin-bottom: 1rem;
  border: 1px dashed #ff5e4e;
  background-color: #fffafa;
}
// 单选
.radio {
  .el-radio {
    // margin-left: 3.125rem;
    white-space: pre-wrap;
    line-height: 2.1875rem;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner {
    background-color: #ff5e4e;
    border-color: #ff5e4e;
  }
  /deep/.el-radio__input.is-checked + .el-radio__label {
    color: #666;
    width: 70rem;
  }
  /deep/.el-radio__label {
    font-size: 1.125rem;
  }
  /deep/.el-radio-group {
    width: 70rem;
  }
}
.descb {
  // height: 2.5rem;
  line-height: 2.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}
/deep/.el-checkbox__label {
  display: inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 20px;
}
.wfd {
  overflow: hidden;
  background-color: #fff;
  // padding: 2.5rem 2.5rem 1.875rem;
  box-sizing: border-box;
  .h160 {
    height: 10rem;
    display: flex;
    padding-right: 6.875rem;
    box-sizing: border-box;
    .pdl15 {
      padding-left: 0.9375rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .title {
        font-size: 1.25rem;
        color: #333;
        font-weight: bold;
      }
      .des {
        font-size: 1rem;
        color: #999;
        line-height: 2rem;
      }
    }
  }
  .h60 {
    height: 3.75rem;
    line-height: 3.75rem;
    padding-left: 1.25rem;
    box-sizing: border-box;
    background-color: #f7f7f7;
    display: flex;
    margin-bottom: 1rem;
    position: relative;
    .exnum {
      width: 45rem;
      font-size: 1rem;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .labels {
      display: flex;
      justify-content: flex-end;
      width: 21.25rem;
      span {
        height: 1.875rem;
        line-height: 1.875rem;
        padding: 0 0.375rem;
        box-sizing: border-box;
        background-color: #ff9b4f;
        border-radius: 0.1875rem;
        margin: 0.9375rem 0.46875rem;
        color: #fff;
        box-sizing: border-box;
      }
    }
  }
  .h383 {
    margin: 3.125rem 0 1.5625rem;
    background: #fffafa;
    border: 0.1875rem dashed #ff5e4e;
    border-bottom: 0.1875rem dashed #ff5e4e !important;
    box-sizing: border-box;
    padding: 1.875rem 15.9375rem;
    box-sizing: border-box;
    font-size: 1.125rem;
    color: #666;
    line-height: 2rem;
    .img-box {
      width: 38.1875rem;
      height: 20.1875rem;
      margin: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .time {
    font-size: 1rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    position: relative;
    margin-top: 2rem;
    span {
      margin-right: 1.875rem;
    }
    .iconfont {
      font-size: 1.5rem;
      color: #ccc;
    }
    .end {
      position: absolute;
      right: -1.5rem;
      text-align: right;
    }
  }
}

.insert {
  .microphone {
    width: 4.375rem;
    height: 4.375rem;
    line-height: 4.375rem;
    text-align: center;
    margin-left: 47%;
    border-radius: 50%;
    cursor: pointer;
    background-color: #eee;
    .iconfont {
      font-size: 2.5rem;
      color: #fff;
    }
  }
  .countdown {
    height: 2.8125rem;
    line-height: 2.8125rem;
    font-size: 1rem;
    color: #333;
    text-align: center;
  }
}
.record {
  width: 420px;
  margin: 0 auto;
  position: relative;
  .cover {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    top: 1.5625rem;
    right: 2.8125rem;
    background-color: #f2f2f2;
  }
}
.btns {
  height: 4.125rem;
  width: 20.875rem;
  margin: auto;
  line-height: 2.5rem;

  .el-button {
    color: #ff5e4e;
    font-size: 1.125rem;
    text-align: center;
    width: 5rem;
    border-radius: 0.3125rem;
    border: 0.0625rem solid #ff5e4e;
    margin: 0.625rem 2.5rem;
    background-color: #fffafa;
  }
}

.setpink {
  background-color: #ff5e4e !important;
}
.readyTime {
  color: #ff5e4e;
}

// 多选
.multiple {
  .title {
    font-size: 1.125rem;
    color: #333;
    margin-left: 3.125rem;
  }
  .el-checkbox {
    margin-top: 1.5rem;
    display: block !important;
    // margin-left: 3.125rem;
  }
  /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #666;
  }
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #ff5e4e;
    border-color: #ff5e4e;
  }
  /deep/ .el-checkbox__label {
    padding-right: 2rem;
  }
}
</style>